<!DOCTYPE html>
<html>
<head>
    <title>reviewProject.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet"
          href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style type="text/css">
    .select {
        width: 510px;
    }
</style>
<body>
<div id="app">
    <h2>{{ message }}</h2>
</div>

<div id="tableView">
    <!--列表顶部搜索和工具条-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="评议项目">
                <el-input v-model="searchForm.pname" placeholder="评议项目"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
                <el-button type="success" icon="el-icon-plus" @click="addClick">新增</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!--列表-->
    <el-row>
        <el-table
                :data="tableData"
                v-loading.body="loading"
                border
                @selection-change="selectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55"
                    align="center">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    width="50"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="评议项目"
                    align="center"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="excellent"
                    label="优"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="good"
                    label="良"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="secondary"
                    label="中"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="poor"
                    label="差"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="yid"
                    label="日期"
                    align="center"
                    width="300">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
                    width="240">
                <template scope="scope">
                    <el-button type="primary" plain v-if="scope.row.state=='2'"  icon="el-icon-check"  @click="lookClick( scope.row)">查看</el-button>
                    <el-button type="success" plain v-if="scope.row.state=='1   '"  icon="el-icon-edit" @click="editClick( scope.row)">编辑</el-button>
                    <el-button type="danger" plain v-if="scope.row.state=='1'"  icon="el-icon-delete" @click="deleteClick( scope.row)">禁用</el-button>
                    <el-button type="success" plain v-if="scope.row.state=='2'"  icon="el-icon-delete" @click="openClick( scope.row)">启用</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
        <!-- <el-col :span="6" >
            <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
        </el-col> -->
        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>

    <!--编辑界面-->
    <el-dialog title="评议项目" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="评议项目" prop="pname">
                <el-input v-model="editForm.pname" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="等次分值" prop="excellent">
                优:<el-input-number v-model="editForm.excellent" :min="7" :step="1" :max="8"></el-input-number>
            </el-form-item>
            <el-form-item prop="good" style="margin-left:280px;margin-top:-62px">
                良:<el-input-number v-model="editForm.good" :min="5" :step="1" :max="6"></el-input-number>
            </el-form-item>
            <el-form-item prop="secondary">
                中:<el-input-number v-model="editForm.secondary" :min="3" :step="1" :max="4"></el-input-number>
            </el-form-item>
            <el-form-item prop="poor" style="margin-left:280px;margin-top:-62px">
                差:<el-input-number v-model="editForm.poor" :min="1" :step="1" :max="2"></el-input-number>
            </el-form-item>
            <el-form-item label="评议内容" prop="content">
                <el-input type="textarea" v-model="editForm.content"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false" @click="resetForm('editForm')">取消</el-button>
            <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
    <!--查看界面-->
    <el-dialog title="评议项目" :visible.sync="editFormVisible1" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="评议项目" prop="pname">
                <el-input v-model="editForm.pname" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="等次分值" prop="excellent">
                优:<el-input-number v-model="editForm.excellent" :min="0" :step="1" :max="8" disabled></el-input-number>
            </el-form-item>
            <el-form-item prop="good" style="margin-left:280px;margin-top:-62px">
                良:<el-input-number v-model="editForm.good" :min="0" :step="1" :max="6" disabled></el-input-number>
            </el-form-item>
            <el-form-item prop="secondary">
                中:<el-input-number v-model="editForm.secondary" :min="0" :step="1" :max="4" disabled></el-input-number>
            </el-form-item>
            <el-form-item prop="poor" style="margin-left:280px;margin-top:-62px">
                差:<el-input-number v-model="editForm.poor" :min="0" :step="1" :max="2" disabled></el-input-number>
            </el-form-item>
            <el-form-item label="评议内容" prop="content">
                <el-input type="textarea" v-model="editForm.content" disabled></el-input>
            </el-form-item>
            <el-form-item label="选择年份" prop="yid">
                <el-select v-model="editForm.yid" placeholder="请选择" class="select" disabled>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible1 = false" @click="resetForm('editForm')">取消</el-button>
            <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: '评议项目'
        }
    });
    var tableView = new Vue({
        el: '#tableView',
        data: {
            //列表数据
            tableData: [],
            //显示加载中样式
            loading:false,
            //搜索表单
            searchForm: {
                pname: '',
            },
            //多选值
            multipleSelection: [],
            //当前页
            currentPage:1,
            //分页大小
            pageSize:5,
            //总记录数
            total:20,
            //删除的弹出框
            deleteVisible:false,
            //编辑界面是否显示
            editFormVisible: false,
            editFormVisible1: false,
            editLoading: false,
            goUrl:'',
            editFormRules: {
                pname: [
                    { required: true, message: '请输入评议项目', trigger: 'blur' },
                    { min: 2, message: '请输入不少于2个字符', trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' }
                ],
                content: [
                    { required: true, message: '请输入评议内容', trigger: 'blur' },
                    { min: 2, message: '请输入不少于2个字符', trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' }
                ],
                yid:[
                    { type: 'number', required: true, message: '请选择年份', trigger: 'change' }
                ]
            },
            //编辑界面数据
            editForm: {
                pname: '',
                excellent: '',
                good: '',
                secondary: '',
                poor: '',
                content: '',
                yid: ''
            },
            options: [
            ],
        },
        created:function(){
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.pageSize;
            axios.post('/Comment/list',{'start':start,'pageSize':this.pageSize}).then(function(response){
                self.total=response.data.total;
                self.tableData = response.data.data;
                self.options = response.data.options;

            })
        },
        methods:{
            //表格重新加载数据
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                //var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.pageSize;
                var searchForm={'start':start,'pageSize':this.pageSize,'pname':this.searchForm.pname,/* 'name':this.searchForm.name,'projectname':this.searchForm.projectname */};
                //   alert(JSON.stringify(searchForm));
                axios.post('/Comment/list',searchForm).then(function(response){
                    console.log(response.data);
                    //alert(response.data);
                    _self.total=response.data.total;
                    _self.tableData = response.data.data;
                    _self.options = response.data.options;
                    //_self.multipleSelection=response.data.data;
                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },
            //表格编辑事件
            editClick:function(row) {
                this.goUrl="/Comment/update";
                this.editFormVisible = true;
                this.editForm = Object.assign({},row);
            },
            //表格查看事件
            lookClick:function(row) {
                this.goUrl="/Comment/list";
                this.editFormVisible1 = true;
                this.editForm = Object.assign({}, row);
            },
            //取消事件
            resetForm:function(editForm) {
                this.$refs[editForm].resetFields();
            },
            //表格禁用事件
            deleteClick:function(row) {
                var _self = this;
                this.$confirm('确认禁用吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var  url="/Comment/del/"+row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message:'删除成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //启用事件
            openClick:function(row) {
                var _self = this;
                this.$confirm('确认启用吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var  url="/Comment/open/"+row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message:'启用成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //启用事件 End
            //新建事件
            addClick:function() {
                this.editForm={
                    pname: '',
                    excellent:'',
                    good:'',
                    secondary: '',
                    poor:'',
                    content:'',
                    yid: ''
                };
                //alert(111);
                this.goUrl="/Comment/insert";
                var _self = this;
                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                _self.loadingData();//重新加载数据
            },
            //表格查询事件
            searchClick:function() {
                var self = this;
                self.loadingData();//重新加载数据
            },
            //表格勾选事件
            selectionChange:function(val) {
                for(var i=0;i<val.length;i++) {
                    var row = val[i];
                }
                this.multipleSelection = val;
                console.info(val);
            },
            //分页大小修改事件
            pageSizeChange:function(val) {
                console.log('每页 ' + val +' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //保存点击事件
            editSubmit:function(editForm){
                //this.$refs[editForm].validate(function(valid){
                this.$refs[editForm].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        var _self = this;
                        _self.loading = true;
                        var formData =this.editForm;
                        //alert(formData);
                        var goUrl=this.goUrl;
                        //alert(goUrl);
                        //alert(JSON.stringify(formData));
                        axios.post(goUrl,formData).then(function(response){
                            // console.log(response.data);
                            // self.total=response.data.total;
                            if(response.data>0){
                                _self.editFormVisible = false;// 让弹出层隐藏
                                _self.loadingData();//重新加载数据
                            }
                        })
                        console.info(this.editForm);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getTime(date){
                this.time = date;
                console.log(this.time);
            }
        }

    })
</script>
</body>
</html>
